<template>
  <div>
    <scroller :show-scrollbar="false">

      <vm-cell label="鸡场名称"
               :title="farm.farmName"></vm-cell>

      <vm-cell label="组织形式"
               :title="farmOrg"></vm-cell>

      <vm-cell label="鸡场类型"
               :title="farmCate"></vm-cell>

      <vm-cell label="详细地址"
               :title="farm.addressDetail"></vm-cell>

      <vm-cell label="联系方式"
               @cellClicked="callPhone"
               :title="contact"></vm-cell>

      <text class="p-2 small text-muted">农场简介</text>

      <text class="p-2 bg-white border-y">{{farm.des}}</text>

    </scroller>
  </div>
</template>
<script>
import VmCell from '../../components/vm-cell.vue'
import {
  STORAGE_FARM
} from '../../plugins/constant'
import {
  enumFarmOrg
} from '../../plugins/enumFarm'

export default {
  components: { VmCell },
  props: {},
  data() {
    return {
      farm: {},
      farmOrg: '',
      farmCate: '',
      contact: ''
    }
  },
  computed: {},
  watch: {},
  created() {
    this.getFarm()
  },
  methods: {
    getFarm() {
      this.farm = this.$storage.getSync(STORAGE_FARM) || {}
      this.farmOrg = enumFarmOrg[this.farm.orgClass] || '暂无组织形式'
      this.farmCate = this.farm.enumCategoryName || '暂无鸡场类型'
      this.contact = (!this.farm.contact && !this.farm.mobileNo) ? '暂无农场联系人' : `${this.farm.contact || ''} ${this.farm.mobileNo || ''}`
    },
    callPhone() {
      if (this.farm.mobileNo) {
        this.$coms.call(this.farm.mobileNo, false)
      }
    }
  }
}
</script>
<style lang="scss" scoped>
@import "../../css/variables.scss";

.p-2 {
  padding: 20px;
}
.bg-white {
  background-color: #fff;
}
.small {
  font-size: 28px;
}
.text-muted {
  color: #999;
}
.border-y {
  border-top-width: 1px;
  border-top-color: $border-color;
  border-bottom-width: 1px;
  border-bottom-color: $border-color;
}
</style>
